<template>
  <el-dialog
    v-model="info.isShow"
    :title="info.isAdd ? '添加菜单管理' : '编辑菜单管理'"
    center
    :before-close="cancel"
  >
    <el-form :model="menuInfo" :rules="rules" ref="form">
      <el-form-item label="菜单名称" label-width="120px" prop="title">
        <el-input v-model="menuInfo.title" />
      </el-form-item>
      <el-form-item label="上级菜单" label-width="120px" prop="pid">
        <el-select v-model="menuInfo.pid" placeholder="请选择">
          <el-option label="顶级菜单" :value="0" />
          <el-option
            v-for="item in get_menuList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型" label-width="120px">
        <el-radio :label="1" v-model="menuInfo.type">目录</el-radio>
        <el-radio :label="2" v-model="menuInfo.type">菜单</el-radio>
      </el-form-item>
      <el-form-item
        label="菜单地址"
        label-width="120px"
        v-if="menuInfo.type == 1"
      >
        <el-input v-model="menuInfo.url" />
      </el-form-item>
      <el-form-item label="菜单图标" label-width="120px" v-else>
        <el-input v-model="menuInfo.icon" />
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="menuInfo.status"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="2"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script setup>
import { defineProps, defineEmits, ref, computed, defineExpose } from "vue";
import { menuadd, menuedit, menuinfo } from "@/request/api.js";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
//-----接收来自父组件的数据-------------
let info1 = defineProps(["info"]);
let store = useStore();
let get_menuList = computed(() => store.getters["menu/get_menuList"]);

//--------------定义数据-----------
//1.定义表单数据
let menuInfo = ref({
  pid: 0, //上级分类编号  注意：顶级菜单-0number
  title: "", //菜单名称string
  icon: "", //图标string
  type: 1, //类型 1目录2菜单number
  url: "", //菜单地址string
  status: 1, //状态   1正常2禁用   number类型number
});
//2.定义表单规则
let rules = ref({
  title: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    { min: 2, max: 8, message: "长度在2 到 8位之间", trigger: "blur" },
  ],
  pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
});
//3.定义ref对象--form表单
let form = ref(null);

//-----------------定义方法-----------
//1.子传父，取消 ，关闭弹窗
let emit = defineEmits("cancel");
function cancel() {
  emit("cancel");
  reset();
}

//3.定义重置的方法
function reset() {
  //数据重置
  menuInfo.value = {
    pid: 0, //上级分类编号  注意：顶级菜单-0number
    title: "", //菜单名称string
    icon: "", //图标string
    type: 1, //类型 1目录2菜单number
    url: "", //菜单地址string
    status: 1, //状态   1正常2禁用   number类型number
  };
  //表单验证重置
  form.value.resetFields();
}

//2.确定---添加、编辑
function sure() {
  //验证表单
  form.value.validate(async (val) => {
    if (!val) {
      return;
    }

    if (info1.info.isAdd) {
      //发起请求，添加菜单管理
      try {
        let res = await menuadd(menuInfo.value);
        if (res.code == 200) {
          //弹框提示
          ElMessage.success(res.msg);
          //关闭弹窗
          cancel();
          //更新页面
          store.dispatch("menu/action_menuList");
        } else {
          ElMessage.error(res.msg);
        }
      } catch (err) {
        ElMessage.error(err);
      }
    } else {
      //发起请求，添加菜单管理
      try {
        let res = await menuedit(menuInfo.value);
        if (res.code == 200) {
          //弹框提示
          ElMessage.success(res.msg);
          //关闭弹窗
          cancel();
          //更新页面
          store.dispatch("menu/action_menuList");
        } else {
          ElMessage.error(res.msg);
        }
      } catch (err) {
        ElMessage.error(err);
      }
    }
  });
}

//3.数据回显
async function lookup(id) {
  try {
    let res = await menuinfo({ id });
    if (res.code == 200) {
      menuInfo.value = res.list;
      menuInfo.value.id = id;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (err) {
    ElMessage.error(err);
  }
}
defineExpose({
  lookup,
});
</script>
  
  <style>
</style>